import { defineComponent, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus";
import { history, start } from "@/api/service-event"
import Header from "@/components/Header.vue"
import FilterBar from "@/components/FilterBar.vue"
import StartFlow from '../components/StartFlow.vue'
import DynamicTable from "@/components/DynamicTable"
import { parseTime, simpleDuration } from "@/utils"

export default defineComponent({
  name: 'MeansServiceEventHistory',
  setup () {
    const route = useRoute()
    const router = useRouter()
    const list = ref([])
    const loading = ref(false)
    const tableColumns = ref([
      { label: "流水号", key: "instanceId" },
      {
        label: "开始时间", key: "startTime",
        render: (h, params) => (
          <span>{parseTime(params.row.startTime)}</span>
        )
      },
      {
        label: "结束时间", key: "endTime",
        render: (h, params) => (
          <span>{parseTime(params.row.endTime)}</span>
        )
      },
      {
        label: "运行时长", key: "duration",
        render: (h, params) => (
          <span>{simpleDuration(params.row.duration)}</span>
        )
      },
      {
        label: "操作",
        width: 100,
        render: (h, params) => <el-button
          type="text"
          size="small"
          onClick={() => openDetailPage(params.row, params.index)}
        >
          详情
        </el-button>
      }
    ])

    // 获取列表数据
    const getList = async () => {
      loading.value = true
      const { status, data, message } = await history({ processDefinitionKey: route.params.name })
      loading.value = false
      if (status === 200) {
        list.value = data
      } else {
        ElMessage.warning(message);
      }
    }

    onMounted(() => {
      getList()
    })

    const flowStartDialog = ref(null) // 开始弹窗组件
    // 执行流程
    const handleStart = async () => {
      flowStartDialog.value.handleOpen(route.params) // 调研组件open方法
    }


    // 跳转到实例的运行进度页面
    const openDetailPage = (row) => {
      router.push({
        name: 'MeansServiceEventHistoryInstance', params: {
          id: row.instanceId
        }
      })
    }

    return () => (
      <div class="container">
        <Header onRefresh={() => { getList() }} />
        <div class="page-main">
          <div class="page-main-query" style={{ marginBottom: '10px' }}>
            <FilterBar
              showBack={true}
              onRoute={() => router.back()}
              v-slots={{
                left: () => <span style={{ display: 'inline-flex' }}>
                  <span>工作流：</span>
                  <h3>{route.params.nameCn || ''}</h3>
                </span>,
                right: () => <el-button
                  slot="right"
                  type="primary"
                  onClick={() => handleStart()}
                >
                  开始
                </el-button>
              }}
            />
          </div>
          <DynamicTable
            ref="DynamicTable"
            v-loading={loading.value}
            data={list.value}
            columns={tableColumns.value}
            showPagination={false}
            class="table-container"
          />
        </div>

        <StartFlow ref={flowStartDialog} />
      </div>
    )
  }
})